<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import axios from 'axios';

const form = ref({
  orgId: '',      // 组织ID
  name: '',       // 组织名
  cadminId: '',   // 负责人
  badminId: '', // B级管理员ID（可选）
  email: '',      // 邮箱
  members: ''     // 组织成员（字符串，逗号分隔）
});

const formRef = ref(null);
const isEditing = ref(false);

const fetchOrgInfo = async () => {
  const orgId = localStorage.getItem('loginId');
  try {
    // 获取组织基本信息
    const orgRes = await axios.get(`http://localhost:8080/orgs/getStudentOrg/${orgId}`);
    if (orgRes.data && orgRes.data.code === 200) {
      form.value.orgId = orgRes.data.data.orgId;
      form.value.name = orgRes.data.data.name;
      form.value.cadminId = orgRes.data.data.cadminId;
      form.value.badminId = orgRes.data.data.badminId; // 可选字段
      form.value.email = orgRes.data.data.email;
    }
    // 获取成员列表
    const memberRes = await axios.get(`http://localhost:8080/orgs/${orgId}/members`);
    if (memberRes.data && memberRes.data.code === 200) {
      form.value.members = memberRes.data.data.map(m => m.name).join(', ');
    }
  } catch (error) {
    ElMessage.error('获取组织信息失败');
  }
};

onMounted(fetchOrgInfo);

const startEditing = () => {
  isEditing.value = true;
};

const submitForm = async () => {
  if (!form.value.email) {
    ElMessage.error('请填写邮箱');
    return;
  }
  try {
    const response = await axios.put(
      `http://localhost:8080/orgs/${form.value.orgId}/updateOrg`,
      {
        "orgId": Number(form.value.orgId),
        "email": form.value.email
      }
    );
    if (response.data && response.data.code === 200) {
      ElMessage.success('邮箱已成功保存');
      isEditing.value = false;
      fetchOrgInfo();
    } else {
      ElMessage.error(response.data.msg || '保存失败');
    }
  } catch (error) {
    ElMessage.error('网络错误，保存失败');
  }
};

const cancelEditing = () => {
  isEditing.value = false;
};
</script>

<template>
  <div class="edit-profile">
    <h1>组织信息</h1>
    <div v-if="!isEditing" class="info-display">
      <p><strong>组织名：</strong>{{ form.name }}</p>
      <p><strong>组织ID：</strong>{{ form.orgId }}</p>
      <p><strong>c级管理员：</strong>{{ form.cadminId }}</p>
      <p><strong>b级管理员：</strong>{{ form.badminId }}</p>
      <p><strong>组织成员：</strong>{{ form.members }}</p>
      <p><strong>邮箱：</strong>{{ form.email }}</p>
      <el-button type="primary" @click="startEditing">修改邮箱</el-button>
    </div>

    <el-form v-else :model="form" ref="formRef" label-width="100px" class="form-container">
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">保存</el-button>
        <el-button @click="cancelEditing">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped>
.edit-profile {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.info-display p {
  margin: 10px 0;
}

.form-container {
  margin-top: 20px;
}
</style>